import React from "react"
import styles from '@/assets/css/detail.module.css'
import { TMap } from '@map-component/react-tmap'

export default () => {
    const roomid = React.params('roomid') ?? 0

    const [roomInfo, SetRoomInfo] = useState({
        flag_text: [],
        price: 0,
        total: 0,
        name: '',
        content: '',
        thumb_text: ''
    })
    const [commentList, SetCommentList] = useState([])

    useEffect(() => {
        GetRoomInfo()
    }, [])

    // 获取房间详情信息
    const GetRoomInfo = async () => {
        let result = await React.request.post('/room/RoomInfo', {roomid})

        if(result.code == 0)
        {
            React.toast(result.msg, 'fail', 'back')
            return false
        }

        SetRoomInfo(result.data.info)
        SetCommentList(result.data.commentlist)
    }

    // 立即预订
    const ToBook = () => {
        // 判断是否有登录
        if(Object.getOwnPropertyNames(React.business).length <= 0)
        {
            React.toast('请先登录', 'fail')
            return false
        }

        React.navigate(`/room/confirm?roomid=${roomid}`)
    }

    return (
        <>
            <div className={styles.header}>
                <React.UI.NavBar back="返回" onBack={() => React.navigate(-1)}>房间详情</React.UI.NavBar>
            </div>

            <React.UI.Image src={roomInfo.thumb_text} height={213} fit='cover' style={{marginTop: '50px'}}/>

            <div className={styles.detail_top}>
                <div id="intro" className={styles.intro}>
                    <div className={styles.title}>{roomInfo.name}</div>
                    <div className={styles.betwee}>
                        <div className={styles.left}>
                            {
                                roomInfo.flag_text.map((item: string, index: number) =>{
                                    return(
                                        <React.UI.Tag 
                                            color='primary'
                                            fill='outline'
                                            style={{'--border-radius': '6px'}}
                                            key={index}
                                        >
                                            {item}
                                        </React.UI.Tag>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className={styles.title}>{roomInfo.content}</div>
                </div>

                {/* 预定需知 */}
                <div className={styles.notesin}>
                    <div className={styles.title}>预订须知</div>
                    <div className={styles.item}>
                        <span className={styles.tips}>预订房型：</span>
                        <span>{roomInfo.name}</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>宠物：</span>
                        <span>不可携带宠物</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>剩余房间数量：</span>
                        <span>{roomInfo.total}</span>
                    </div>
                </div>

                {/* 地图 */}
                <div className={styles.notesin}>
                    <TMap 
                        mapKey="2SZBZ-CKDLT-XWCXJ-LDHW7-KK5JQ-QKB4K"
                        center={{ lat: 39.984104, lng: 116.307503 }}
                        version='1.exp'
                    />
                </div>

                {/* 评价 */}
                <div id="comment" className={styles.comment}>
                    <div className={styles.title}>评价</div>
                        <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                            {commentList && commentList.map((item:any) => (
                                <div className={styles.rate_list_item} key={item.id}>
                                    <div className={styles.item_content}>
                                        <div className={styles.content_prefix}>
                                            <div className={styles.ratelist}>
                                                <div className={styles.image}>
                                                    <img src={item.business.avatar_text} alt="" />
                                                </div>
                                                <p className={styles.nickname}>{item.business.nickname}</p>
                                            </div>
                                        </div>
                                        <div className={styles.content_main}>
                                            <div className={styles.rate}>
                                                <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                            </div>
                                            <div className={styles.item_description}>
                                                <p>{item.content}</p>
                                                <p className={styles.item_time}>{item.createtime_text}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </React.UI.List>

                        <React.UI.AutoCenter>
                            {
                                commentList && commentList.length > 0 ? 
                                <Link to={`/room/comment?roomid=${roomid}`}>查看更多评价</Link> : 
                                <React.UI.Empty description='暂无评论' image={<React.ICON.ExclamationCircleOutline style={{fontSize: 40, color: '#cccccc'}}/>} />
                            }
                        </React.UI.AutoCenter>
                </div>
            </div>

            <div className={styles.foot_bar}>
                <div className={styles.price}>
                    ￥{roomInfo.price}
                </div>
                <React.UI.Button color='primary' shape='rounded' onClick={ToBook}>立即预定</React.UI.Button>
            </div>
        </>
    )
}